<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>jscript05브라우저객체</title>
	</head>

	<body>
		<h1>브라우저객체 DOM</h1>
		<p>자바스크립트를 통해 브라우저를 제어할 수 있음</p>
		<p>Window : 브라우저 창window을 다루는 객체</p>
		<p>Screen : 브라우저 화면을 다루는 객체</p>
		<p>Location : 브라우저 위치정보를 다루는 객체</p>
		<p>History : 브라우저 방문정보를 다루는 객체</p>
		<p>Navigator : 브라우저 자체정보를 다루는 객체</p>
		<p>Cookie : 브라우저 쿠키를 다루는 객체</p>
		<p>Timing : 타이머 이벤트를 다루는 객체</p>
		
		<h3>window 객체</h3>
		<p>브라우저 자체를 가리키는 객체</p>
		<p>window 객체는 모든 브라우저에 지원함</p>
		<p>일반적으로 생략가능하고 모든 변수, 함수, 객체는 window객체의 하위요소으로 취급할 수 있음</p>
		<p>ex) encodeURI()는 window.encodeURI()로도 사용가능</p>
		<p>window.innerWidth : 창 너비 (표준)
			<button type="button" onclick="checkwin();">창 크기 알아보기</button></p>
		<p>window.innerHeight : 창 높이 (표준)</p>
		<p>document.body.clientWidth : 창 너비 (IE8이하)</p>
		<p>document.body.clientHeight : 창 높이 (IE8이하)</p>
		
		<p>window.open(주소, 창이름, 창속성) : <button type="button" onclick="newwin1();">새창 띄우기</button>
											<button type="button" onclick="randomwin();">랜덤창 띄우기</button>
											<button type="button" onclick="stoprandom();">랜덤창 그만</button></p>
		<p>window.close() : <button type="button" onclick="closewin1();">창 닫기</button></p>
		<p>window.moveTo(x좌표, y좌표) : <button type="button" onclick="movewin1();">창 이동하기</button></p>
		<p>window.resizeTo(가로크기, 세로크기) : <button type="button" onclick="resizewin1();">창 크기 변경하기</button></p>
		
		<script type="text/javascript">
			var win1 = null;	// 새 창을 저장하기 위해
			function newwin1(){
				win1 = window.open("http://www.google.com", "win1", "width=350, height=250");
				// 새창을 띄울시 반드시 창이름을 지정할것!
			}
			function closewin1(){
				win1.close();
				//window.close();
				//self.close();
			}
			function movewin1(){
				win2 = window.open("about:blank", "win", "width=100, height=100");
				win2.moveTo(550, 325);
				win2.focus();	// 눈에 잘띄게 포커스 지정
			}
			function resizewin1(){
				win2.resizeTo(550, 450);
				win2.focus();
			}
			function randomwin(){
			  win3 = window.open("about:blank", "win3", "width=250, height=150");
			  timer = setInterval("makeWin()", 500);			  
			}
			function makeWin(){
				win3.resizeTo(Math.random()*400, Math.random()*400);
				win3.moveTo(Math.random()*900, Math.random()*900);
				win3.focus();
			}
			function stoprandom(){
				clearInterval(timer);
				win3.close();
			}
			function checkwin(){
				var result = "가로 : " + window.innerWidth + "\n세로 : " + window.innerHeight;				 
				alert(result);
			}
		</script>
		
		<hr />
		<h3>Screen</h3>
		<p>브라우저 화면정보 제어</p>
		<p>screen.availWidth : (방문객 브라우저 화면 가로 크기) <button type="button" onclick="showscreen();">최대 화면크기 보기</button></p>
		<p>screen.availHeight : (방문객 브라우저 화면 세로 크기)</p>
		<p>screen.width : (전체 화면 가로 크기) <button type="button" onclick="centerscreen();">정중앙에 창(300*200)띄우기</button></p>
		<p>screen.height : (전체 화면 세로 크기)</p>
		
		<script type="text/javascript">
			function showscreen(){
				var result = "브라우저 가로 화면 : " + screen.availWidth
							+ "\n브라우저 세로 화면 : " + screen.availHeight
							+ "\n가로 화면 크기 : " + screen.width
							+ "\n세로 화면 크기 : " + screen.height;
				alert(result);
			}			
			function centerscreen(){
				var cw = screen.width/2;
				var ch = screen.height/2;
				var cwin = window.open("about:blank", "center", "width=300, height=200");
				cwin.moveTo(cw - 150, ch - 100);				
			}
		</script>
		
		<hr />
		<h3>Location</h3>
		<p>브라우저의 현재 페이지 주소 URL을 알아내거나<br />
			브라우저에게 새로운 페이지로 이동하라고 지시할 수 있음</p>
		<p>location.hostname : 호스트 정보</p>
		<p>location.pathname : 현재 페이지 경로</p>
		<p>location.port : 현재 페이지 포트번호</p>
		<p>location.protocol : 현재 페이지 프로토콜</p>
		<p>location.href : 현재 페이지 URL
			<button type="button" onclick="go2page();">새로운 페이지로 이동</button></p>
		<p>location.replace() : 지정한 페이지로 이동함. location.href와 유사하지만 history가 남지 않음</p>
		<p>location.reload() : 현재 페이지를 새로고침함</p>
		
		<script type="text/javascript">
			document.write(location.hostname + "<br />");
			document.write(location.pathname + "<br />");
			document.write(location.port + "<br />");
			document.write(location.protocol + "<br />");
			document.write(location.href + "<br />");
			function go2page(){
				location.href="http://www.daum.net";
			}
		</script>
		
		<hr />
		<h3>Navigator</h3>
		<p>방문자 브라우저의 정보로 구성된 객체</p>
		<p>navigator.appCodeName : 브라우저 코드네임</p>
		<p>navigator.appName : 브라우저 이름</p>
		<p>navigator.appVersion : 브라우저 버젼</p>
		<p>navigator.platform : 운영체제 환경</p>
		<p>navigator.userAgent : 방문자 브라우저 정보</p>
		
		<script type="text/javascript">
			var result = navigator.appCodeName;
			result += "<br />" + navigator.appName;
			result += "<br />" + navigator.appVersion;
			result += "<br />" + navigator.platform;
			result += "<br />" + navigator.userAgent;
			
			document.write(result + "<br />");
			
			var ua = navigator.userAgent;
			if(ua.indexOf("Chrome")>-1){
				document.write("크롬을 사용하는 군요!");
			}else if(ua.indexOf("Firefox")>-1){
				document.write("파폭을 사용하는 군요!");
			}else if(ua.indexOf("MSIE")>-1){
				document.write("IE를 사용하시는 군요!");
			}else if(ua.indexOf("rv:11.0")>-1){
				document.write("IE 11를 사용하시는 군요!");
			}else{
				document.write("기타등등");
			}
		</script>
		
		
		
	</body>
</html>
